// 首页统计
import React, { Component } from 'react';
import ReactECharts from 'echarts-for-react';
import '../ST/HTji.css';
import { dateRange, dateCalc, dateASC } from '../../config/utils';
class HTji extends Component {
  componentDidMount() {}
  getDateXAxis() {
    let currentDate = new Date();
    let lastDate = dateCalc(currentDate, 30, 'dec'); //递减
    return dateRange(lastDate, currentDate, 'MM.dd');
  }
  render() {
    let tempObj = {
      1000: '最强王者',
      900: '星耀Ⅰ',
      800: '星耀Ⅱ',
      700: '星耀Ⅲ',
    };
    const options = {
      grid: {
        top: 12,
        right: 14,
        bottom: 12,
        left: -40,
        containLabel: true,
      },
      tooltip: {
        show: false,
      },
      xAxis: {
        type: 'category',
        data: this.getDateXAxis(),
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: '#5a5a5a', // 颜色
            width: 1, // 粗细
          },
        },
        axisLabel: {
          margin: 10,
          interval: 100000,
          showMinLabel: true,
          showMaxLabel: true
        },
        splitArea: {
          areaStyle: {
            shadowBlur: {
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10,
            },
            opacity: 0.6,
          },
        },
      },
      yAxis: {
        type: 'value',
        min: 800,
        max: 1000,
        left: 0,
        axisLine: { onZero: false },
        splitNumber: 2,
        // 分割线
        splitLine: {
          lineStyle: {
            color: '#5a5a5a',
          },
        },
        axisLabel: {
          margin: 44,
          // align:'left',
          textStyle: {
            align: 'left',
            baseline: 'middle',
          },
          formatter: (v) => {
            return tempObj[v];
          },
          fontSize: 10,
        },
      },
      series: [
        {
          data: [
            800,
            825,
            850,
            875,
            850,
            875,
            900,
            925,
            950,
            925,
            900,
            875,
            850,
            825,
            850,
            825,
            850,
            875,
            900,
            925,
            950,
            975,
            1000,
            1000,
            1000,
            1000,
            1000,
            1000,
            1000,
            1000,
            1000,
            1000,
          ],
          type: 'line',
          smooth: false,
          showAllSymbol: false,
          itemStyle: {
            normal: {
              color: '#951bb3',
              borderColor: '#951bb3',
              areaStyle: {
                type: 'default',
                opacity: 0.3,
              },
            },
          },
        },
      ],
    };
    return (
      <div
        className='home-tong-ji'
        style={{
          marginTop: '60px',
        }}
      >
        <ReactECharts
          option={options}
          style={{ width: '100%', height: '240px' }}
        />
      </div>
    );
  }
}

export default HTji;
